import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import styles from './expressBillModal.less';
import moment from 'moment';
import { Input, Select, Checkbox,Radio,Modal, Form, Button, message, Spin,Row, Col, Table, InputNumber } from 'antd';
import update from 'immutability-helper';
//import { checkStatus } from '@/utils/CommonRequestOption';

const FormItem = Form.Item;
const { Option } = Select;

class Index extends Component{
  
    state={
        visible:false,
        isUpdate:false,
        packageData:[]
    }

    componentDidMount(){
        window.Isoption = true; 
        const {onRef} = this.props;      
        onRef&&onRef(this)        
    }

    componentWillMount() {
        window.Isoption = false;
    }

    okHandle = () => {
        const {dispatch,packageList} = this.props; 
        const {packageData} = this.state;      
        this.data.forEach(item=>{
            if(item.ExpressId !==0){
                if(item.WaybillNum){
                    item.errorStatus2=false;
                }else{
                    item.errorStatus2=true;
                }
            }
        }) 
        console.log(this.data)
        let length=this.data.filter(v=>v.errorStatus2).length;
        if(length){
            this.setState({
                isUpdate:true
            })
            return;
        }

        let ItemList=[];
        packageData.forEach(v=>{
            ItemList.push({
                PackageId:v.Id,
                ExpressId:v.PkgGoodsLists[0].ExpressId,
                WaybillNumber:v.PkgGoodsLists[0].WaybillNum
            })
        })
        //return
        dispatch({
            type:'deliverManage/EditPackage',
            payload:{
                ItemList,
            },
            callback:{
                success:(data)=>{
                    message.success('操作成功')
                    this.hideModal()
                },
                error:(data)=>{
                    message.success(data.Msg)
                }
            }
        })
    }
    
    showModal = (OrderNo) => {
        const { dispatch } = this.props;
        this.setState({
            visible:true
        },()=>{   
            dispatch({
                type:'deliverManage/GetStoreExpressList',                                
            })         
            dispatch({
                type:'deliverManage/GetPackageList',
                payload:{
                    OrderNo,
                },
                callback:{
                    success:(res)=>{
                        this.data=[];
                        res.Data.DataList.forEach((item,index)=>{            
                            item.PkgGoodsLists.forEach((v,i)=>{  
                                let RowSpan=0; 
                                if(i==0){
                                    RowSpan=item.PkgGoodsLists.length;
                                }else{
                                    RowSpan=0;
                                }
                                                    
                                let obj={...v,Id:index+''+i,RowSpan,WaybillNum:item.WaybillNum,ExpressId:item.ExpressId,index:index,PackageId:item.Id};
                                this.data.push(obj)
                            })
                        })
                        let packageData=JSON.parse(JSON.stringify(res.Data.DataList));
                        packageData.forEach(item=>{
                            item.PkgGoodsLists.forEach(v=>{
                                v.WaybillNum=item.WaybillNum;
                                v.ExpressId=item.ExpressId;
                            })                            
                        }) 
                        this.setState({
                            packageData
                        })
                    }
                }
            })
        })
    }

    hideModal = () => {
        this.setState({
            visible:false
        })
    }

    handleModalVisible = () => {
        const { handleModalVisible } =this.props;
        if(typeof handleModalVisible === 'function') handleModalVisible();
    }

    changeSelect = (e,index) => {
        const { packageList } = this.props;
        const {packageData} = this.state;        
        packageData[index].PkgGoodsLists.forEach(v=>{
            v.ExpressId=e;
        })       
        this.data.forEach((item)=>{
            if(item.index===index){
                item.ExpressId=e;
            }
        })
        this.setState({
            isUpdate:true,
           packageData
        })
    }
    changeInput = (e,index) => {
        let value=e.target.value;
        console.log(value,index)
        const { packageList } = this.props;
        const {packageData} = this.state;
        //let packageData=JSON.parse(JSON.stringify(packageList));
        packageData[index].PkgGoodsLists.forEach(v=>{
            v.WaybillNum=value;
        })
        this.data.forEach((item)=>{
            if(item.index===index){
                item.WaybillNum=value;
            }
        })
        this.setState({
            isUpdate:true,
            packageData
        })
    }

    render(){
        const {visible,isUpdate}=this.state;
        const { packageList,expressList,loading,loading2,submitLoading } = this.props;
        const columns = [
            {
                title: '包裹',
                dataIndex: 'ReceivingName', 
                width:'20%', 
                render:(text, record, index)=>{
                    const obj = {
                            children: `包裹${record.index+1}`,
                            props: {},
                        };
                        obj.props.rowSpan = record.RowSpan;

                        return obj;
                }           
            },
            {
                title: '商品',
                dataIndex: 'OrderNo',       
                width: '25%',
                render:(text,record)=>(
                    <div>
                        <span>{record.ProductName}</span>
                        <span>*</span>
                        <span>{record.DeliveryNum}</span>
                    </div>
                )
            },
            {
                title: '物流公司',
                dataIndex: 'ExpressName',      
                width: '25%',  
                render:(text, record, index)=>{
                    const obj = {
                            children: (
                                <FormItem validateStatus={record.errorStatus1?'error':'success'} help={record.errorStatus1?'请选择物流公司':''}>
                                    <Select value={record.ExpressId} onChange={(e)=>this.changeSelect(e,record.index)}>
                                        <Option value={0}>无需物流</Option>
                                        {
                                            expressList&&expressList.length&&expressList.map((item)=>{
                                                return <Option value={item.Id}>{item.Name}</Option>
                                            })
                                        }
                                    </Select>
                                </FormItem>
                            ),
                            props: {},
                        };
                        obj.props.rowSpan = record.RowSpan;
                        return obj;
                }                   
            },
            {
                title: '快递单号',
                dataIndex: 'WaybillNumber',
                width: '30%', 
                render:(text, record, index)=>{
                    const obj = {
                            children: (
                                <FormItem validateStatus={record.errorStatus2?'error':'success'} help={record.errorStatus2?'请填写快递单号':''}>
                                    {
                                        <Input value={record.WaybillNum} disabled={record.ExpressId==0} onChange={(e)=>this.changeInput(e,record.index)}/>
                                    }
                                </FormItem>
                            ),
                            props: {},
                        };
                        obj.props.rowSpan = record.RowSpan;
                         return obj;
                }                   
            }
        ];        
        
      
        let obj=loading||loading2?{footer:false}:{};
        console.log(columns,this.data,88)

        return (		
        <Modal
            destroyOnClose={true}
            centered
            title="修改物流"
            visible={visible}
            onOk={this.okHandle}                
            confirmLoading={ submitLoading }
            onCancel={this.hideModal}
            width={640}  
            a={isUpdate}
           {...obj}
            className={`${styles.modifyModal}`}   
        >      
            <Spin spinning={loading||loading2}>            
                <Table               
                   scroll={{ y: this.data&&this.data.length>5?320:0 }}   
                   bordered            
                    rowKey={record => Math.random()}
                    dataSource={this.data}
                    columns={columns}               
                    pagination={false}
                />                        
            </Spin>
        </Modal>
        );
	}
}

export default connect(({deliverManage,loading})=>({
    packageList:deliverManage.packageList,
    expressList:deliverManage.expressList,
    loading:loading.effects['deliverManage/GetPackageList'],
    loading2:loading.effects['deliverManage/GetStoreExpressList'],
    submitLoading:loading.effects['deliverManage/EditPackage'],
}))(Index)